import React from 'react'
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { Button, Col, Form, Input, Row, Select, Checkbox, TreeSelect, Space, DatePicker } from 'antd';
const { RangePicker } = DatePicker;
export default function Search(props: any) {
    const {getData,setTableData}=props
    interface params {
        username?: string
        roleName?:string
        createTimeFrom?: string
        createTimeTo?: string
    }
    const [form] = Form.useForm();
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    const onFinish = (fieldsValue: any) => {
        // getData(values)
        //解构表单对象中的每一项
        const { roleName,rangePicker } = fieldsValue;
        //实际提交后端的参数对象
        console.log(roleName,rangePicker)
        const params: params = {}
         if (roleName) params.roleName = roleName
         if (rangePicker) {
            const rangeValue = fieldsValue['rangePicker'];
            params.createTimeFrom = rangeValue[0].format('YYYY-MM-DD')
            params.createTimeTo = rangeValue[1].format('YYYY-MM-DD')
         }
        getData(params)
    };
    function reset() {
        form.resetFields()
        getData()
    }
    return (
        <div>
            <Form
                onFinish={onFinish}
                form={form}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                className='SearchForm'
            >
                <Form.Item label="角色"
                    name={'roleName'}>
                    <Input />
                </Form.Item>
                <Form.Item label="创建时间"
                    name={'rangePicker'}
                    className='flex1'
                >
                    <RangePicker />
                </Form.Item>
                <Form.Item>
                    <div>
                        <Button type="primary" htmlType="submit" style={{ marginRight: '10px' }}>查询</Button>
                        <Button type="primary" onClick={reset}>重置</Button>
                    </div>
                </Form.Item>
            </Form>
        </div>
    )
}
